<template>
  <div class="person_wapper">
  	<p class="title">{{formTitle}}</p>
    <form-detail class='form_wappers' :formData='formData'></form-detail>
    <p class="title">{{tableTitle}}</p>
    <table-panel class='table_wappers' :labelList='labelList' :tableData='tableData' :control='false'></table-panel>
    <!--<div class="pagination">
      <el-pagination
        background
        layout="prev, pager,next, sizes,jumper"
        :page-sizes="[15, 30, 45]"
        :total="1000">
      </el-pagination>
    </div>-->
  </div>
</template>

<script>
import formDetail from '../../components/common/form/formDetail.vue'
import tablePanel from '../../components/common/table/table.vue'
import {apiPersonListPersonDetail,apiPersonListCaseDetail} from '../../api/api'
export default{
	components:{
    	tablePanel,
    	formDetail
	},
	data(){
		return {
			tableTitle : '案件详情',
			formTitle: "涉案人员列表",
			labelList:{
        ajbh : '案件编号',
        ajmc : '案件名称',
        fasjcz : '案发时间',
        zagj : '作案工具',
        fadd : '案发地址',
        sdtd: '手段特点',
        xzsj: '选择时机'
      },
			tableData :[],
			formData:[],
      formShow : {
        xm : '',
        sfzh : '',
        xb : '',
        mz : '',
        zzxz : '',
      },
      translateList : {
        xm : '姓名',
        sfzh : '身份证号',
        xb : '性别',
        mz  : '民族',
        zzxz : '户籍地址',
      },
		}
	},
  methods : {

  },
  mounted(){
    apiPersonListPersonDetail(this.$route.query.sfzh).then((res)=> {
      let resData = Object.assign({},this.formShow,JSON.parse(res.data.result));
      for(let [key,value] of Object.entries(resData)){
        if(key == 'xb'){
          switch(true){
            case value == 0:
              value = '未知的性别';
              break;
            case value == 1:
              value = '男';
              break;
            case value == 2:
              value = '女'
              break;
            case value == 3:
              value = '女性改（变）为男性'
              break;  
          }
        }
        this.formData.push({label : this.translateList[key],'value' : value});
      }
    })
    apiPersonListCaseDetail(this.$route.query.sfzh,1,20).then((res)=> {
      let resData = JSON.parse(res.data.result);
      this.tableData = resData.list
    })
  },
}
</script>

<style lang="scss" scoped>
.form_wappers,.count,.table_wappers {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
}
.form_wappers {
  /*padding: 12px;*/
  background-color: #eee;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.count {
  margin: 12px auto;
  span {
    em {
      color: red;
    }
  }
}
.pagination {
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 20px;
}
.title {
	width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    background: rgba(230, 243, 252, 1);
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-family: "微软雅黑";
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
</style>
